<template>
    <div class="mui-content enterpriseList mgb2 mui-scroll-wrapselectNextper">
        <div class="mui-scroll">
            <div class="slwy-panel mgt1 enterprise-list-con">
                <div class="panel-content">
                    <div class="fromCity mui-clearfix">
                        <span class="text2-size color1 fromCityTitle">当前:</span>
                        <span class="fromCityMain mui-clearfix mui-ellipsis">
                            <span class="text1-size color2 mui-icon mui-icon-location"></span>
                            <span class="text2-size color2 mui-ellipsis">{{currentLocation}}</span>
                        </span>
                    </div>
                    <ul class="mui-table-view serviceNetwork">
                        <li v-for="enterprise in list" class="mui-table-view-cell mui-media enterpriseListWrap" @click="selectNext(enterprise.id,enterprise.enterpriseName)">
                            <div class="enterpriseLeft">
                                <div class="mui-ellipsis networkName text2">{{enterprise.enterpriseName}}</div>
                                <p class="mui-ellipsis networkAdd">
                                    <span class="mui-icon mui-icon-location text2-size color2"></span>
                                    <span class="text2-size color2">{{enterprise.enterpriseAddress}}</span>
                                </p>
                                <p class="mui-ellipsis networkTel">
                                    <span class="mui-icon mui-icon-phone text2-size color2"></span>
                                    <span class="text2-size color2">{{enterprise.enterpriseTel}}</span>
                                </p>
                            </div>
                            <div class="attrText distance" id="near_{{enterprise.id}}" style="display: none;">距离最近</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    /*定位地址*/
    .fromCity {padding: 0.2rem .3rem; height: auto; border-bottom: 1px solid #e2e2e2; font-size: .26rem; color: #666; vertical-align: middle;}
    .fromCity > span { display: inline-block; vertical-align: middle;}
    .enterpriseList .fromCity{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .enterpriseList .fromCity .fromCityTitle {width: 1rem !important; display: inline-block;}
    .enterpriseList .fromCity .fromCityMain {-webkit-box-flex: 1; -ms-box-flex: 1; -moz-box-flex: 1;}
    .enterpriseList .enterpriseListWrap{display: -webkit-box; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center;}
    .enterpriseList .enterpriseListWrap .enterpriseLeft {-webkit-box-flex: 1; -ms-box-flex: 1; -moz-box-flex: 1; padding-right: 0.1em;}
    .enterpriseList .attrText {width: 1.5rem !important; font-size: .28rem;  padding: 0.05rem 0.1rem;}
    .enterpriseList .distance {border: 1px solid #ff8317; color: #ff8317;}
    .enterpriseList .evaluate {border: 1px solid #2f77e3; color: #2f77e3;}
    .enterprise-list-con{margin-bottom:1.1rem!important;}
</style>
<script type="text/ecmascript-6">
    import footerNavComponent from '../../components/footer-nav/footer-nav.vue';
    import '../../fonts/mui.css';
    import {API} from '../../config/constants'
    import Page from '../../base/Page'
    import wechat from '../../libs/wechat'
    export default new Page({
        vuex: {
            actions: {
                selectEnterPrise: function ({dispatch}, data) {
                    dispatch('SELECT_ENTERPRISE', data);
                }
            }
        },
        data(){
            return {
                list: [],
                currentLocation: 'GPS定位中...',
                fromPage:"",
                showFooter:"true"
            }
        },
        ready() {
            mui('.mui-scroll-wrapper').scroll({
                indicators: true, //是否显示滚动条
                deceleration : 0.0005,
            });
            //组件入口源页面初始化
            this.fromPage = this.$route.params.from;
            this.showFooter = this.fromPage!="banpen2"?"true":"false";

            //初始化服务单位列表
            this.getJSON(API.LIST_ENTERPRISE, {}, gpsres => {
                this.list = gpsres.resultData;

                // 临时解决方案，延迟调用wechat sdk
                setTimeout(() => {
                    //GPS定位处理
                    wechat.getAddress((address, location) => {

                        this.currentLocation = address;

                        this.getJSON(API.GET_ENTERPRISE_NEAREST, {from: location}, result => {

                            console.log(result.resultData);
                            if (mui('#near_' + result.resultData)[0] === undefined) {
                                return;
                            } else {
                                mui('#near_' + result.resultData)[0].style.display = "block";
                            }
                        })
                    });
                }, 1000)
            });
        },
        methods: {

            selectNext: function (id, name) {

                //默认企业列表
                if ('default' == this.fromPage) {
                    this.$route.router.go('/enterprise/' + id);
                }

                //订单选择服务单位
                if ('banpen2' == this.fromPage) {
                    //组织企业对象
                    var enterprise = {'id': id, 'name': name};
                    //save order enterprise
                    this.selectEnterPrise(enterprise);
                    this.$route.router.go('/banpen/step2/');
                }
            }
        },
        components: {
            footerNavComponent
        }
    });

</script>
